import './styles/common.scss'
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { renderWithQiankun, qiankunWindow } from 'vite-plugin-qiankun/dist/helper'
// 使用乾坤渲染
renderWithQiankun({
   // 挂载时执行
   mount(props) {
      console.log('mount')
      render(props)
   },
   bootstrap() {
      console.log('bootstrap', '只会执行一次')
   },
   // 卸载时执行
   unmount(props) {
      console.log('unmount', props)
   },
})

if (!qiankunWindow.__POWERED_BY_QIANKUN__) {
   render({})
}

function render(props = {}) {
   const { container } = props
   const app = createApp(App)
   app.use(router)
   app.mount(container ? container.querySelector("#app") : "#app")
}


// const app = createApp(App)

// app.use(router)

// app.mount('#app')

/*
   上线流程
   1. 打包上线 npm run build / yarn build  ---> dist目录
   2. 交给公司运维 / 后端 / 全干(被迫) - 前端组长  (手动上传)到服务器 人资 (内网) -> 局域网下访问  / 期待 外网 (所有人都可以访问)   

*/

/*
  v2 选项式API 基于选项
     data methods computed ...  
     复用比较困难 - 基于组件封装 template + js + css 

  v3 组合式API composition 基于逻辑复用(js)
     放弃了v2的面向对象的方式 this 
     以函数调用的方式, 将一个个函数组合到一起了
     import { ref, onMounted } from 'vue' 
     ref()
     onMounted(() => {})

     vueuse 库提供了很多好用的hook
     一般在封装自定义函数(hook) 都是以use开头 是一个规范

*/


/*
 清理目录:
 1. assets 删除掉
 2. components 删除掉
 3. router/index -> routes 空规则 []
 4. views 清空
 5. App.vue 根组件 模板中只保留路由出口
 6. main.js 清除引入样式
*/
